<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>图文列表17</title>
   <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
   <link rel="stylesheet" href="../css/public.css">
   <style>
      .imgText_list_cnt {
         display: flex;
         flex-direction: column;
      }

      .imgText_list_imgs {
         display: flex;
         flex-wrap: wrap;
         padding-bottom: 60px;
      }

      .imgText_list_imgs li {
         flex: 0 0 25%;
         max-width: 25%;
         padding: 0 2%;
      }

      .imgText_list_img {
         width: 100%;
         border-radius: 50%;
         overflow: hidden;
      }

      .imgText_list_img img {
         width: 100%;
         height: 100%;
      }

      .imgText_list_text>p {
         font-size: var(--f_describe);
         line-height: var(--l_describe);
         color: var(--c_subtitle);
      }

      @media (min-width:769px) {
         .imgText_list_text {
            width: 50%;
         }
      }

      @media (max-width:768px) {
         .imgText_list_imgs {
            padding-bottom: 0;
         }

         .imgText_list_imgs li {
            flex: 0 0 50%;
            max-width: 50%;
            padding-bottom: 4%;
         }
      }
   </style>
   <script src="../js/jquery-3.5.1.min.js"></script>
</head>

<body>
   <div class="imgText_list modular">
      <div class="public_width imgText_list_cnt">
         <ul class="imgText_list_imgs">
            <li>
               <div class="imgText_list_img">
                  <img src="https://18325014.s61i.faiusr.com/4/AD0IlrzeCBAEGAAgm_7m4AUo_NDTggEwnQI4nQI.png.webp" alt="">
               </div>
            </li>
            <li>
               <div class="imgText_list_img">
                  <img src="https://18325014.s61i.faiusr.com/4/AD0IlrzeCBAEGAAgm_7m4AUo_NDTggEwnQI4nQI.png.webp" alt="">
               </div>
            </li>
            <li>
               <div class="imgText_list_img">
                  <img src="https://18325014.s61i.faiusr.com/4/AD0IlrzeCBAEGAAgm_7m4AUo_NDTggEwnQI4nQI.png.webp" alt="">
               </div>
            </li>
            <li>
               <div class="imgText_list_img">
                  <img src="https://18325014.s61i.faiusr.com/4/AD0IlrzeCBAEGAAgm_7m4AUo_NDTggEwnQI4nQI.png.webp" alt="">
               </div>
            </li>
         </ul>
         <div class="imgText_list_text">
            <div class="public_title">
               <h2>客户成功案例</h2>
               <p>Exhibition Service</p>
            </div>
            <p>严格的国际化管理操作模式，全方位、一体化的专业展览服务使我们在展览业享负盛名凭借前沿的设计理念和过硬的设计能力准确把握各个客户的独特需求</p>
            <a class="button_small" href="">MORE</a>
         </div>
      </div>
   </div>
</body>
<script>
   $(function () {
      imgText_list_img_w()
   })
   $(window).resize(function () {
      imgText_list_img_w()
   })
   //控制图片宽度等于图片高度
   function imgText_list_img_w() {
      $(".imgText_list_img").css("height", "auto")
      var imgText_list_img_w = $(".imgText_list_img").width()
      $(".imgText_list_img").css("height", imgText_list_img_w)
   }
</script>

</html>